<template>
	<view class="home u-skeleton" :style="{minHeight:screen + 'px'}">
		<view class="webstate" v-if="webstate">{{webstate_msg}}</view>
		<u-navbar rightSwitch :bgColorShow="false" :fixed_h="false"
			:bgColor="`rgba(255,207,79,${Math.round(scrollTopp) / 150})`" title="　" :back="false">
			<template #center>
				<view class="home-navbar" :style="{opacity:Math.round(scrollTopp) / 150}">
					<view class="navbar-left">
						<view class="navbar-avatar u-skeleton-circle">
							<u-avatar border lineColor="#fff" :src="shop_data.logo" size="35"></u-avatar>
						</view>
						<view class="navbar-name u-skeleton-rect">{{shop_data.title||'*****'}}</view>
					</view>
					<view class="navbar-right u-skeleton-fillet">
						<view class="navbar-service" @click="$refs.contact.controller(true)">
							<u-icon name="server-man" size="20" color="#000"></u-icon>
						</view>
					</view>
				</view>
			</template>
		</u-navbar>
		<home-info :swiper_list="swiper_list" :loading="loading" @maskChang="$refs.contact.controller(true)">
			<view class="u-menu-wrap">
				<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view u-skeleton-fillet"
					:scroll-top="scrollTop" :scroll-into-view="itemId">
					<view v-for="(item,index) in select" :key="index" class="u-tab-item u-skeleton-rect"
						:class="{tabactive:current == index,round:current+1 == index}" @click.stop="swichMenu(item,index)">
						<image :src="`/static/images/sr${current == index?'l':'m'}.png`"
							class="tab-icon u-skeleton-circle"></image>
						<text class="u-line-2 tab-trands u-skeleton-rect"
							:class="current==index?'tab-model':''">{{item.name}}</text>
					</view>
				</scroll-view>
				<!-- ********************* -->
				<!-- @scroll="rightScroll" -->
				<scroll-view :scroll-into-view="scrollinto" @scrolltolower="scrolltolower" :scroll-top="scrollRightTop"
					scroll-y scroll-with-animation class="right-box">
					<!-- v-for="(item , index) in select" -->
					<!-- :id="'item' + index" -->
					<!-- :key="index" -->
					<view class="class-item u-skeleton-fillet">
						<view class="item-title">
							<view class="title-box">
								<view class="shop-mode">{{select[current].name}}</view>
								<view class="shop-line"></view>
							</view>
						</view>
						<view class="item-container">
							<commodity-item @skuChang="skuChang" :list="commod_list" />
							<listempty mode="list" vh="300px" text="商品正在赶来的路上..." :list="commod_list" />
						</view>
					</view>
				</scroll-view>
			</view>
		</home-info>
		<contact-popup ref="contact" />
		<commodity-sku :sku_data="sku_data" :show="sku_stats" @close="sku_stats=false" ref="commSku" />
		<u-skelete :loading="loading" animation bgColor="transparent"/>
	</view>
</template>

<script>
	import shopArr from '@/common/public.js'
	export default {
		data() {
			return {
				//app开发状态 1-开发中 0-已结束
				webstate: 0,
				webstate_msg: '项目开发中~',
				webstate_time: 3000,
				sku_data: {},
				sku_stats: false,
				scrollTopp: 0,
				shopArr,
				loading: true,
				select: [{
						name: '水果',
						child_list: [{
							cover_img: 'http://youlefang.szhulian.cn/uploads/image/20231031/91f72367502a877213fdfc11f09a6653.jpg',
							name: '正宗维纳斯小苹果纯甜齁甜浓郁',
							id: 17,
							price: '32.90',
							sold_num: '4',
						}]
					},
					{
						name: '水果',
						child_list: [{
							cover_img: 'http://youlefang.szhulian.cn/uploads/image/20231031/91f72367502a877213fdfc11f09a6653.jpg',
							name: '正宗维纳斯小苹果纯甜齁甜浓郁',
							id: 17,
							price: '32.90',
							sold_num: '4',
						}]
					},
					{
						name: '水果',
						child_list: [{
							cover_img: 'http://youlefang.szhulian.cn/uploads/image/20231031/91f72367502a877213fdfc11f09a6653.jpg',
							name: '正宗维纳斯小苹果纯甜齁甜浓郁',
							id: 17,
							price: '32.90',
							sold_num: '4',
						}]
					},
					{
						name: '水果',
						child_list: [{
							cover_img: 'http://youlefang.szhulian.cn/uploads/image/20231031/91f72367502a877213fdfc11f09a6653.jpg',
							name: '正宗维纳斯小苹果纯甜齁甜浓郁',
							id: 17,
							price: '32.90',
							sold_num: '4',
						}]
					},
					{
						name: '水果',
						child_list: [{
							cover_img: 'http://youlefang.szhulian.cn/uploads/image/20231031/91f72367502a877213fdfc11f09a6653.jpg',
							name: '正宗维纳斯小苹果纯甜齁甜浓郁',
							id: 17,
							price: '32.90',
							sold_num: '4',
						}]
					},
				],
				arr: [],
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0,
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				itemId: '', // 栏目右边scroll-view用于滚动的id
				scrollRightTop: -1, // 右边栏目scroll-view的滚动条高度
				timer: null, // 定时器
				evnter: false,
				scrollinto: '',
				scrll_arr: [],
				commod_list:[],
				swiper_list:[]
			};
		},
		onLoad() {
			this.getcomodityMode()
			this.getSwiper()
		},
		onPageScroll(e) {
			this.scrollTopp = e.scrollTop;
		},
		onPullDownRefresh(){
			this.current = 0
			this.getcomodityMode()
		},
		methods: {
			getSwiper(){
				this.$network('/api/index/data').then(res=>{
					if(res.code == 1){
						const { image } = res.data
						this.swiper_list = image
					}
				})
			},
			getcomodityMode() {
				this.loading = true
				uni.$u.http.get('/api/index/defInfo?type=goods_cate').then(res => {
					const {
						select_list
					} = res.data
					this.select = select_list
					this.getcommodity(select_list[0].id)
				}).finally((e) => {
					this.$nextTick(() => {
						this.getMenuItemTop()
						setTimeout(() => {
							this.loading = false
							// this.getdeFault()
						}, 600)
					})
				})
			},
			getcommodity(cid){
				this.$network('/api/goods/lists',{
					cid
				}).then(res=>{
					if(res.code == 1){
						const { list} = res.data
						this.commod_list = list
					}
				}).finally((e) => {
					this.$nextTick(() => {
						this.showhideloding()
					})
				})
			},
			getdeFault(){
				uni.$u.http.get('/api/index/default').then(res=>{
					const {
						webstate_msg,
						webstate,
						webstate_time
					} = res.data
					this.webstate = webstate
					this.webstate_msg = webstate_msg
					this.webstate_time = webstate_time
					setTimeout(() => {
						this.webstate = 0
					}, 3000);
				})
			},
			skuChang(e) {
				this.sku_data = e
				this.sku_stats = true
			},
			scrolltolower() {
				setTimeout(() => {
					this.current = this.select.length - 1
				}, 100)
			},
			// 点击左边的栏目切换
			async swichMenu(item,index) {
				this.evnter = true
				// if (this.arr.length == 0) {
				// 	await this.getMenuItemTop();
				// }
				if (index == this.current) return;
				this.current = index;
				this.showLoding()
				this.getcommodity(item.id)
				// this.scrollinto = this.scrll_arr[index].id
				setTimeout(() => {
					this.scrollinto = ''
				}, 300)
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
						resolve();
					}).exec();
				})
			},
			// 观测元素相交状态
			async observer() {
				this.tabbar.map((val, index) => {
					let observer = uni.createIntersectionObserver(this);
					// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
					// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
					observer.relativeTo('.right-box', {
						top: 0
					}).observe('#item' + index, res => {
						if (res.intersectionRatio > 0) {
							let id = res.id.substring(4);
							this.leftMenuStatus(id);
						}
					})
				})
			},
			// 设置左边菜单的滚动状态
			async leftMenuStatus(index) {
				console.log(index)
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 获取右边菜单每个item到顶部的距离
			// 右边菜单滚动
			async rightScroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
				if (this.arr.length == 0) {
					await this.getMenuItemTop();
				}
				if (this.timer) return;
				if (!this.menuHeight) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
				}
				setTimeout(() => { // 节流
					this.timer = null;
					// scrollHeight为右边菜单垂直中点位置
					let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
					for (let i = 0; i < this.arr.length; i++) {
						let height1 = this.arr[i];
						let height2 = this.arr[i + 1];
						// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
						if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
							if (this.evnter || this.oldScrollTop < 10) {
								this.leftMenuStatus(this.current);
								this.evnter = false
								return
							}
							this.leftMenuStatus(i);
							return;
						}
					}
				}, 10)
			},
			getMenuItemTop() {
				new Promise(resolve => {
					let selectorQuery = uni.createSelectorQuery();
					selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
						if (!rects.length) {
							setTimeout(() => {
								this.getMenuItemTop();
							}, 10);
							return;
						}
						rects.forEach((rect) => {
							// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
							const num = rect.top - rects[0].top
							this.scrll_arr.push(rect)
							this.arr.push(num);
							resolve();
						})
					}).exec()
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/home.scss";
</style>
